<template>
    <div class="public-common">
        <!--车辆分队管理-->
        <el-row style="height:100%;">
            <el-col :span="8" style="height:100%;">
                <div class="carunit-box">
                    <div class="public-title">车队列表{{count0}}</div>
                    <div class="carunit-tit">部门名称</div>
                    <div style="height:calc(100% - 62px);padding:0 10px;">
                        <el-scrollbar style="height:100%;">
                            <p v-for="(item,index) in tabledata" :key="index" :class="index==0?'carunit-li active':'carunit-li'">{{item.name}}</p>
                        </el-scrollbar>
                    </div>
                </div>
                
            </el-col>
            <el-col :span="8" style="height:100%;">
                <div class="carunit-box">
                    <div class="public-title">车队所属车辆列表({{count1}})</div>
                    <div class="carunit-tit">
                        <el-checkbox :indeterminate="transfer.isIndeterminateHas" v-model="transfer.checkAllhas" @change="checkedAllHas">车牌号</el-checkbox>
                        <el-button type="danger" size="mini">从本车队中移除 <i class="el-icon-d-arrow-right"></i></el-button>
                    </div>                    
                    <div style="height:calc(100% - 70px);padding:0 10px;">
                        <el-scrollbar style="height:100%;">
                            <el-checkbox-group v-model="transfer.checkedHas" @change=" checkedChangeHas">
                                <p v-for="carid in transfer.hasArry" :key="carid" class="carunit-li">
                                    <el-checkbox  :label="carid" >{{carid}}</el-checkbox>
                                </p>
                            </el-checkbox-group>
                        </el-scrollbar>
                    </div>
                    
                </div>
            </el-col>
            <el-col :span="8" style="height:100%;">
                <div class="carunit-box">
                    <div class="public-title">未分配车辆列表({{count2}})</div>
                    <div class="carunit-tit">
                        <el-checkbox :indeterminate="transfer.isIndeterminateNot" v-model="transfer.checkAllnot" @change="checkedAllNot">车牌号</el-checkbox>
                        <el-button type="primary" size="mini" icon="el-icon-d-arrow-left">将车辆分配到车队</el-button>
                    </div>                    
                    <div style="height:calc(100% - 70px);padding:0 10px;">
                        <el-scrollbar style="height:100%;">
                            <el-checkbox-group v-model="transfer.checkedNot" @change=" checkedChangeNot">
                                <p v-for="carid in transfer.notArry" :key="carid" class="carunit-li">
                                    <el-checkbox  :label="carid" >{{carid}}</el-checkbox>
                                </p>
                            </el-checkbox-group>
                        </el-scrollbar>
                    </div>
                </div>
            </el-col>
        </el-row>        
        
    </div>
</template>
<script>
export default {
    data(){
        return {
            form:{
                test:'',
                carid:''
            },
            tabledata:[
                {name:"部门一1"},
                {name:"部门一2"},
                {name:"部门一3"},
                {name:"部门一4"},
                {name:"部门一5"},
                {name:"部门一6"},
                {name:"部门一7"},
                {name:"部门一8"},
                {name:"部门一12"},
                {name:"部门一13"},
                {name:"部门一14"},
                {name:"部门一15"},
                {name:"部门一16"},
                {name:"部门一17"},
                {name:"部门一18"}
            ],
            transfer:{
                checkAllhas:false,
                isIndeterminateHas:false,
                hasArry:['carid1','carid2','carid3','carid4','carid12','carid31','carid14','carid21','carid13','carid41','carid42','carid43','carid44'],
                checkedHas:[],

                checkAllnot:false,
                isIndeterminateNot:false,
                notArry:['delcarid1','delcarid2','delcarid3','delcarid4','delcarid12','delcarid31','delcarid14','delcarid21','delcarid13','delcarid41','delcarid42'],
                checkedNot:[]
            }
        }
    },
    mounted(){
        
    },
    computed:{
        count0:function (){
            return this.tabledata.length
        },
        count1:function (){
            return this.transfer.hasArry.length
        },
        count2:function (){
            return this.transfer.notArry.length
        }
    },
    methods:{
        checkedAllHas(status){
            this.transfer.checkedHas = status ? this.transfer.hasArry : [];
            this.transfer.isIndeterminateHas = false;
        },
        checkedChangeHas(value){
             let checkedCount = value.length;
            this.transfer.checkAllhas = checkedCount == this.transfer.hasArry.length;
            this.transfer.isIndeterminateHas = checkedCount > 0 && checkedCount < this.transfer.hasArry.length;
        },
        checkedAllNot(status){
            this.transfer.checkedNot = status ? this.transfer.notArry : [];
            this.transfer.isIndeterminateNot = false;
        },
        checkedChangeNot(value){
             let checkedCount = value.length;
            this.transfer.checkAllnot = checkedCount == this.transfer.notArry.length;
            this.transfer.isIndeterminateNot = checkedCount > 0 && checkedCount < this.transfer.notArry.length;
        }
    }
}
</script>
<style lang="scss">
// $Color:#15428F;
// $Bgnavtab:rgba(255,255,255,.5);
// $BgHeader:#DFE8F6;
// $BorderColor:#99bbe8;
// .public-common{
//     padding: 20px 20px 10px;box-sizing:border-box;height:100%;
//     .public-title{line-height: 30px;background-color: #deecfd;padding:0 10px;color:$Color; }
//     .carunit-box{margin:0 10px 0 0;border:1px solid $BorderColor;height: 100%;
//         .carunit-tit{line-height:30px;font-size:14px;margin:0 10px;border-bottom:1px solid $BorderColor}
//         .carunit-li{line-height:25px;color:#666;
//         cursor: pointer;padding-left:5px;
//             &:nth-child(odd){background-color: #eee;}
//             &:hover,&.active{color:$Color;background-color: $BgHeader;}
//             &.active{font-weight: bold;}
//         }
//     }
// }
</style>